<template>
  <div class="body page-miH page-bgBack">
    <div class="mb12 fs16 fw500">用工单位</div>
    <a-row type="flex" justify="space-between" class="mg_t20 mg_b20">
      <a-col>
        <a-input-search placeholder="名称/联系人/手机号" style="width: 200px" :defaultValue="para" allowClear @search="onSearch" />
      </a-col>
      <a-col>
        <a-button @click="goImport" style="margin-right: 12px"> 批量导入 </a-button>
        <a-button type="primary" icon="plus" @click="addEmp"> 添加用工单位 </a-button>
      </a-col>
    </a-row>
    <a-table
      :pagination="pagination"
      :data-source="dataSource"
      :row-key="(dataSource) => dataSource.id"
      :loading="tableLoading"
      @change="pageChange"
    >
      <a-table-column title="用工单位名称" data-index="name" align="center">
        <div slot-scope="text, record" style="position: relative">
          {{ text }}
          <div v-if="!record.contractStatus" class="band-wrapper" />
        </div>
      </a-table-column>
      <a-table-column title="联系人" data-index="legalPerson" align="center" />
      <a-table-column title="联系电话" data-index="telephone" align="center" />
      <a-table-column title="操作" :width="212" align="center">
        <template slot-scope="text">
          <a-button type="link" @click="management(text)">设置</a-button>
          <a-button type="link" @click="geEditor(text)">详情</a-button>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "EmployMentunit",
  components: {},
  data() {
    return {
      para: "",
      dataSource: [],
      source: [],
      pagination: {
        current: 1
      },
      tableLoading: false
    };
  },
  computed: {
    ...mapState(["hr"]),
    rowSelection() {
      // const { selectedRowKeys } = this;
      return {
        onChange: (selectedRowKeys, selectedRows) => {},
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name
          }
        })
      };
    },
    companyList() {
      return this.hr.companyList;
    },
    showFuwufankui() {
      return this.$hasPermission("hr:enterpriseSetup:eventHandling");
    }
  },
  watch: {
    companyList: {
      handler() {
        this.getEmpList();
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    goImport() {
      this.$router.push({
        path: "./import"
      });
    },
    management(e) {
      console.log(e);
      this.$router.push({
        path: "/admin/switch",
        query: { id: e.id }
      });
    },
    // 获取用工单位列表
    async getEmpList() {
      this.dataSource = this.companyList;
      this.source = this.companyList;

      if (JSON.stringify(this.$getCondition("ygdw_condition")) !== "{}") {
        this.para = JSON.parse(this.$getCondition("ygdw_condition"));
        this.onSearch2(this.para);
      }

      // 读取缓存
      if (this.$getPage("ygdw_condition")) {
        this.pagination.current = parseInt(this.$getPage("ygdw_condition")) === 0 ? 1 : parseInt(this.$getPage("ygdw_condition"));
      }
    },
    pageChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.$setPage("ygdw_condition", this.pagination.current);
    },
    onSearch2(e) {
      const source = [...this.source];
      this.para = e;
      this.$setCondition("ygdw_condition", JSON.stringify(this.para));
      if (e) {
        this.dataSource = source.filter(
          (v) => (v.telephone && v.telephone.includes(e)) || (v.name && v.name.includes(e)) || (v.legalPerson && v.legalPerson.includes(e))
        );
      } else {
        this.dataSource = source;
      }
    },
    // 筛选搜索
    onSearch(e) {
      this.onSearch2(e);
      this.pagination.current = 1;
      this.$setPage("ygdw_condition", this.pagination.current);
    },
    // 添加用工单位
    addEmp() {
      this.$router.push({ path: "/admin/add_employment_unit" });
    },
    // 详情
    geEditor(text) {
      this.$router.push({
        path: "/admin/add_employment_unit",
        query: { id: text.id }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.band-wrapper {
  position: absolute;
  top: -20px;
  left: -16px;
  width: 50px;
  height: 50px;
  background-image: url("./ygq.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.body {
  padding: 25px;
  .company {
    color: #333333;
    font-size: 16px;
  }
}
</style>
